<template>
	<view class="container">
		<view class="unbind" v-if="LoginUser.openid">
			<view class="title">已绑定微信账号</view>
			<view class="avatar">
				<u--image :src="LoginUser.avatar" width="80px" height="80px" shape="circle"></u--image>
			</view>
			<view class="nickname">
				{{ LoginUser.nickname }}
			</view>
			<view class="actions">
				<u-button type="error" text="解除绑定" @click="wechat"></u-button>
			</view>
			<view class="text-tips">
				解除绑定后，将无法使用「微信一键登录」。
			</view>
		</view>
		<view class="bind" v-else>
			<view class="title">将与此微信账号绑定</view>
			<view class="avatar" v-if="LoginUser.openid">
				<u--image :src="LoginUser.avatar" width="80px" height="80px" shape="circle"></u--image>
			</view>
			<view class="avatar" v-else>
				<u--image src="/static/avatar.png" width="80px" height="80px" shape="circle"></u--image>
			</view>
			<view class="nickname">
				<open-data type="userNickName"></open-data>
			</view>
			<!--  #ifdef  MP-WEIXIN -->
			<view class="actions">
				<u-button type="primary" text="绑定" @click="bind"></u-button>
			</view>
			<!--  #endif -->
			<view class="text-tips tip">
				绑定后，可使用「微信一键登录」；如提示微信账号已与其它账号绑定，请解除原账号的微信绑定。
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LoginUser: {},
			}
		},
		onShow() {
			//校验用户是否登录
			this.$u.auth.check()
			this.LoginUser = uni.getStorageSync('LoginUser') ? uni.getStorageSync('LoginUser') : {}
		},
		methods: {
			async wechat() {
				let result = await this.$u.api.admin.wechat({
					adminid: this.LoginUser.id
				})
				if (result.code == 1) {
					uni.setStorageSync('LoginUser', result.data);
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
						complete: () => {
							uni.switchTab({
								url: '/pages/admin/index'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: result.msg,
					})
				}
			},
			bind() {
				uni.login({
					provider: 'weixin',
					success: async (res) => {
						const {
							code
						} = res
						let result = await this.$u.api.admin.bind({
							adminid: this.LoginUser.id,
							username: this.LoginUser.username,
							code: code
						})
						if (result.code == 1) {
							uni.setStorageSync('LoginUser', result.data);
							this.$refs.uToast.show({
								type: 'success',
								message: result.msg,
								complete: () => {
									uni.switchTab({
										url: '/pages/admin/index'
									})
								}
							})
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: result.msg,
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.tip{
		margin: 20px;
	}
	.container {
		margin: 0 40rpx;
	}

	.title {
		margin: 40px 0;
		font-size: 18px;
	}

	.bind,
	.unbind {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 40px 0;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
	}

	.nickname {
		margin-top: 4px;
	}

	.actions {
		margin: 40px 0;
		width: 100%;
	}
</style>